<template>
	<view class="tabbar">
		<u-tabbar :value="value" @change="name => value = name" inactiveColor="#666666" activeColor="#FF9800"
			:fixed="true" :placeholder="true" :safeAreaInsetBottom="true" :zIndex="99" :border="false">
			<u-tabbar-item text=" " @click="click1">
				<image class="u-page__item__slot-icon image" slot="active-icon" 
					src="/static/culturalCreativity/icon-home-active.png"></image>
				<image class="u-page__item__slot-icon image" slot="inactive-icon" 
					src="/static/culturalCreativity/icon-home.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text=" "@click="click1">
				<image class="u-page__item__slot-icon image" slot="active-icon" 
					src="/static/culturalCreativity/icon-class-active.png"></image>
				<image class="u-page__item__slot-icon image" slot="inactive-icon" 
					src="/static/culturalCreativity/icon-class.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text=" " @click="click1">
				<image class="u-page__item__slot-icon image" slot="active-icon" 
					src="/static/culturalCreativity/icon-car-active.png"></image>
				<image class="u-page__item__slot-icon image" slot="inactive-icon" 
					src="/static/culturalCreativity/icon-car.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text=" "  @click="click1">
				<image class="u-page__item__slot-icon image" slot="active-icon" 
					src="/static/culturalCreativity/icon-my-active.png"></image>
				<image class="u-page__item__slot-icon image" slot="inactive-icon" 
					src="/static/culturalCreativity/icon-my.png"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: null
			}
		},
		methods: {
			click1(e) {
				this.$emit("click", e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar{
		.image{
		  height: 48rpx;
		width: 48rpx;
		}		
	}
</style>
